<template>
    <div class="payList-view">

      <modules-title titleName="已收费"></modules-title>

      <div class="content-view">

        <screen-view v-model="screenData" @get-data="screenClick"></screen-view>

        <div class="tabView">

          <el-table
            :header-cell-style="{
                        backgroundColor: '#F5F5F5',
                        color: '#333333',
                        fontFamily: 'MicrosoftYaHeiUI',
                        fontSize: '14px',
                        fontWeight: 900,
                        'text-align':'center'
                    }"
            :cell-style="{'text-align':'center'}"
            :data="tableData"
            border
            @sort-change="sortChange"
            style="width: 100%">
            <el-table-column
              prop="real_name"
              label="患者"
              width="120">
            </el-table-column>
            <el-table-column
              label="性别"
              width="60">
              <template slot-scope="scope">
                <span v-if="scope.row.gender == '0'">男</span>
                <span v-else-if="scope.row.gender == 1">女</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="age"
              label="年龄"
              width="80">
              <template slot-scope="scope">
                <span>{{scope.row.age | dealAge}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="mobile"
              label="联系方式"
              width="100">
            </el-table-column>
            <el-table-column
              prop="id_card"
              label="身份证号"
              width="200">
            </el-table-column>
            <el-table-column
              prop="doctor_name"
              label="医生"
              width="120">
            </el-table-column>
            <el-table-column
              label="收款日期"
              sortable="custom"
              width="150">
              <template slot-scope="scope">
                <span>{{scope.row.finish_at}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="user_name"
              label="收费员"
              width="120">
            </el-table-column>
            <el-table-column
              prop="receipts_amount"
              label="总金额"
              width="100">
              <template slot-scope="scope">
                <span>¥{{scope.row.receipts_amount.toFixed(2)}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              min-width="130">
              <template slot-scope="scope">
                <div class="operationView">
                  <el-button type="text" size="small" @click="detailsClick(scope.row.charge_id)">详情</el-button>
<!--                  <div class="line"></div>-->
                  <span v-if="scope.row.is_view_refund != 2">|</span>
                  <el-button v-if="scope.row.is_view_refund != 2" type="text" size="small" class="refundBtn" @click="refundClick(scope.row.charge_id)">退费</el-button>
                </div>

              </template>
            </el-table-column>
          </el-table>

        </div>

        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[3, 5, 7, 10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>

      </div>

    </div>
</template>

<script>
  import screenView from "../modules/screenView";
    import {medicineList} from "../../../api/payOrDrug";

    export default {
        name: "index",
        components: {screenView},
        data:function () {
            return{
                tableData: [],

                total:0,
                loading:false,
                end:false,
                pageNum:1,
                pageSize:10,
                order_name:'',
                order_by:'',

                screenData:{
                    name:'',
                    doc:0,
                    startDate:'',
                    endDate:'',
                }
            }
        },
        mounted:function(){

            this.getData();
        },
        methods:{
            sortChange:function(column, prop, order){

                if (column.column.label == "收款日期"){
                    this.order_name = "finish_at"
                }
                if (column.order == "ascending"){
                    this.order_by = "asc"
                }else {
                    this.order_by = "desc"
                }
                this.getData();
            },
            screenClick:function(){
                this.pageNum = 1;
                this.getData();
            },
            //监听条数变化
            handleSizeChange(val) {
                this.pageSize = val;
                this.getData();
            },
            //监听页码变化
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);

                this.pageNum = val
                this.getData();
            },
            updateApi:function(){
                this.getData();
            },
            detailsClick:function (id) {
                this.$router.push({name:'payDetails',query:{id:id}})
            },
            refundClick:function (id) {
                this.$router.push({name:'addRefund',query:{id:id}})
            },
            getData:function () {
                let data = {
                    real_name:this.screenData.name,
                    doctor_id:this.screenData.doc,
                    start_time:this.screenData.startDate,
                    stop_time:this.screenData.endDate,
                    order_name:this.order_name,
                    status:2,
                    pager:{
                        number:this.pageNum,
                        size:this.pageSize,
                        order_by:this.order_by
                    }
                };
                medicineList(data).then((res)=>{
                    if (res.code == 200){
                        this.total = res.data.total;
                        this.tableData = res.data.data;
                        if (this.pageNum*this.pageSize >= this.total){
                            this.end = true;
                        }else {
                            this.end = false;
                        }
                    }
                })
            },
            currentChange:function (val) {
                this.pageNum = val;
                this.getData();
            },
        }
    }
</script>

<style lang="scss">
  @import "@/assets/scss/payOrDrug/payList.scss";
</style>
